/**
 * 进出记录 - 入框凭证
 * @author xiaoxujs
 */

import { Button, ConfigProvider, Form, Input, message, Select, Space, Table, TableProps, Tooltip } from "antd";
import { RukuangpingzhengBox, ShujuyuanShoudong, ShujuyuanZidong } from "./style";
import type { IBaseEntryVoucherPage, IBaseEntryVoucherPageForm, IBaseEntryVoucherPageParams } from "../../../../../type/Jinchu";
import { SearchButtonReset, SearchButtonSubmit } from "../../../../../assets/style/Button";
import { FC, useCallback, useEffect, useState } from "react";
import { ISelectList, TablePaginationPosition } from "../../../../../type/antd";
import { postBaseEntryVoucherPage } from "../../../api";
import type { IFenye } from "../../../../../type/commit";
import { useWindowFontSize } from "../../../../../assets/fun/Antd/configprovider";
import { basicIp } from "../../../../../api/http";
import ImageModule from "../ImageModule";
import Shoudongdengji from "../Shoudongdengji";

const Rukuangpingzheng:FC<{
    carColorList: ISelectList[],
}> = ({
    carColorList
}) => {
    const contentValue: TablePaginationPosition = "bottomCenter"; //位置
    const [form] = Form.useForm<IBaseEntryVoucherPageForm>();
    const { validateFields, resetFields } = form;

    const [imageShow, setImageShow] = useState(false); //图片显示
    const [imageUrl, setImageUrl] = useState<string>(); // 图片地址

    const [listData, setListData] = useState<IBaseEntryVoucherPage[]>([]);
    const [paging, setPaging] = useState({
        currentPage: 1,
        pageSize: 6,
    });
    const [total, setTotal] = useState(0);
    const [tableLoading, setTableLoading] = useState(false); //tableLoading
    const [searchValue, setSearchValue] = useState<IBaseEntryVoucherPageForm>(); //检索保留数据

    const [shoudongdengjiShow, setShoudongdengjiShow] = useState(false); //手动登记弹窗


    const listFun = useCallback(async (params: IBaseEntryVoucherPageParams) => {
        setTableLoading(true);
        const { code, msg, data } = (await postBaseEntryVoucherPage(
            params
        )) as IFenye<IBaseEntryVoucherPage>;
        if (code === 20000) {
            setListData(data.records);
            setPaging({
                currentPage: params.currentPage,
                pageSize: params.pageSize,
            })
            setTotal(data.total);
            setTableLoading(false);
        } else {
            message.error(msg);
        }
    }, []);

    useEffect(() => {
        const params = {
            currentPage: 1,
            pageSize: 6
        }
        listFun(params);
    }, [listFun])

    //检索
    const handleChaxun = async () => {
        const values = await validateFields();
        const params = {
            currentPage: 1,
            pageSize: 6,
            ...values
        }
        listFun(params)
        setSearchValue(values)
    }
    // 重置
    const handleChongzhi = async () => {
        resetFields();
        const params = {
            currentPage: 1,
            pageSize: 6,
        }
        listFun(params)
        setSearchValue(undefined)
    }
    const handleCallback = () => {
        setImageUrl(undefined);
        setImageShow(false);
    }
    // 手动登记回调
    const handleAddCallback = () => {
        const params = {
            currentPage: 1,
            pageSize: 6,
        }
        listFun(params);
        setShoudongdengjiShow(false);
    }
    const pagination = {
        //分页
        position: [contentValue],
        //是否可以改变pagesize//
        showSizeChanger: true,
        //是否可以快速跳转到某页
        // showQuickJumper: true,
        //展示一共有多少条数据//
        showTotal: () => `共${total}条`,
        //每页条数
        pageSize: paging.pageSize,
        //当前页数
        current: paging.currentPage,
        //数据总数
        total: total,
        //页码改变的回调，参数是改变后的页码及每页条数
        onChange: (current: number, pageSize: number) => {
            const params = {
                currentPage: current,
                pageSize: pageSize,
                ...searchValue
            }
            listFun(params)
        },
    };
    const columns: TableProps<IBaseEntryVoucherPage>['columns'] = [
        {
            title: "序号",
            align: "center",
            render: (_, record, index) => (
                <span>{(paging.currentPage - 1) * paging.pageSize + index + 1}</span>
            ),
        },
        {
            title: '凭证编号',
            dataIndex: 'permitNumber',
            align: "center",
        },
        {
            title: '车牌号',
            align: "center",
            render: (_, record) => <span>{record.plateColor}{record.licensePlate}</span>
        },
        {
            title: '司机电话',
            dataIndex: 'driverPhone',
            align: "center",
        },
        {
            title: '允许入矿日期',
            dataIndex: 'entryDate',
            align: "center",

        },
        {
            title: '是/否入矿？',
            dataIndex: 'isEntry',
            align: "center",
            render: text => <span style={{ color: text === 1 ? '#26C75C' : '#F12222' }}>{text === 1 ? '是' : '否'}</span>
        },
        {
            title: '实际入矿时间',
            dataIndex: 'actualEntryTime',
            align: "center",
        },
        {
            title: '是/否出矿？',
            dataIndex: 'isExit',
            align: "center",
            render: text => <span style={{ color: text === 1 ? '#26C75C' : '#F12222' }}>{text === 1 ? '是' : '否'}</span>
        },
        {
            title: '实际出矿时间',
            dataIndex: 'actualExitTime',
            align: "center",
        },
        {
            title: '照片',
            dataIndex: 'zhaopian',
            align: "center",
            render: (_, record) => <>
            {record.entryPhoto && record.entryPhoto.fileName ? (
                <Button 
                    type="link" 
                    onClick={() => {
                        setImageUrl(basicIp + record.entryPhoto.url);
                        setImageShow(true);
                    }}
                >
                    {record.entryPhoto.fileName.length > 4 ? (
                        <Tooltip title={record.entryPhoto.fileName}>
                            {record.entryPhoto.fileName.slice(0, 4) + '...'}
                        </Tooltip>
                    ) : (
                        record.entryPhoto.fileName
                    )}
                </Button>
            ) : (
                <span style={{marginRight: '1rem'}}>暂无数据</span>
            )}
        
            {record.exitPhoto && record.exitPhoto.fileName ? (
                <Button 
                    type="link" 
                    onClick={() => {
                        setImageUrl(basicIp + record.exitPhoto.url);
                        setImageShow(true);
                    }}
                >
                    {record.exitPhoto.fileName.length > 4 ? (
                        <Tooltip title={record.exitPhoto.fileName}>
                            {record.exitPhoto.fileName.slice(0, 4) + '...'}
                        </Tooltip>
                    ) : (
                        record.exitPhoto.fileName
                    )}
                </Button>
            ) : (
                <span>暂无数据</span>
            )}
        </>
        },
        {
            title: '数据源',
            dataIndex: 'source',
            align: "center",
            render: text => <div style={{ display: 'flex', justifyContent: 'center' }}>
                {
                    text === 1 ? <ShujuyuanShoudong>
                        手动登记
                    </ShujuyuanShoudong> : <ShujuyuanZidong>
                        自动登记
                    </ShujuyuanZidong>
                }
            </div>
        },

    ];

    return <RukuangpingzhengBox>
        <div className="title">入厂凭证</div>
        <div className="search_add">
            <div className="search_box">
                <Form
                    name="complex-form"
                    layout='inline'
                    form={form} 
                    //默认黄色
                    initialValues={{ plateColor: '黄' }}
                >
                    <Form.Item>
                        <Space.Compact>
                            <Form.Item<IBaseEntryVoucherPageForm >
                                name='plateColor'
                                noStyle
                            >
                                <Select style={{ width: '10rem' }} options={carColorList} />
                            </Form.Item>
                            <Form.Item<IBaseEntryVoucherPageForm >
                                name='licensePlate'
                                noStyle
                            >
                                <Input placeholder="请输入车牌号!" />
                            </Form.Item>
                        </Space.Compact>
                    </Form.Item>
                    <Form.Item<IBaseEntryVoucherPageForm >
                        name="driverPhone"
                    >
                        <Input placeholder="请输入联系电话" style={{ width: '27.3rem' }} />
                    </Form.Item>

                    <Form.Item label=" " colon={false}>
                        <SearchButtonSubmit style={{ marginRight: '2rem' }} onClick={handleChaxun}>
                            <span className="iconfont">&#xe605;</span>
                            查询
                        </SearchButtonSubmit>
                        <SearchButtonReset onClick={handleChongzhi}>
                            <span className="iconfont">&#xe67d;</span>
                            重置
                        </SearchButtonReset>
                    </Form.Item>
                </Form>
            </div>
            <div className="add_box">
                <Button type='primary' onClick={() => setShoudongdengjiShow(true)} icon={<span className="iconfont">&#xe620;</span>}>手动登记</Button>
            </div>
        </div>
        <div style={{ padding: '0rem 2rem' }}>
            {/* <Table<IBaseEntryVoucherPage> columns={columns} dataSource={listData} /> */}
            <ConfigProvider theme={{
                components: {
                    Table: {
                        headerColor: '#8B9BAC',
                        cellFontSize: useWindowFontSize(14),
                        cellPaddingBlock: 7
                    }
                }
            }}>
                <Table<IBaseEntryVoucherPage>
                    columns={columns}
                    dataSource={listData}
                    rowKey='id'
                    pagination={pagination}
                    loading={tableLoading}
                />
            </ConfigProvider>
        </div>
        <ImageModule visible={imageShow} handleCallback={handleCallback} src={imageUrl}/>
        <Shoudongdengji open={shoudongdengjiShow} handleCallback={handleAddCallback} carColorList = {carColorList} />
    </RukuangpingzhengBox>
}

export default Rukuangpingzheng;